<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' :close-on-press-escape='false' title="上传视频" :visible.sync="dialogVisible" @close="resetForm('editVideoSzRef')" width="780px" custom-class="upvideo">
      <div class="flexbox up_header">
        <div>1</div> <div>确认信息</div> <div class="line"></div>  <div>2</div><div>上传成片文件</div>
      </div>
        <div class="flexbox" >
            <div style="width:280px">
                <di class="title_text" style="border-right: 1px solid #E8EAEC">
                    确认基础信息
                </di>
                <el-form label-position="top" label-width="auto" size="medium" :hide-required-asterisk='true' :model="editVideoSzForm" :rules="editVideoSzRules" ref="editVideoSzRef" v-loading="loading">
                    <el-form-item label="上传项目">
                        <ul class="sche_info">
                            <li class="flexbox flexcenter flexbetween">
                                <span style="flex-shrink:0">品牌-产品:</span>
                                <span class="sche_text">{{ brand_name }} - {{ product_name }}</span>
                            </li>
                        </ul>
                    </el-form-item>
                    <el-form-item label="业务场景" prop="business_scene">
                        <el-select v-model="editVideoSzForm.business_scene" placeholder="请选择业务场景" style="width:100%">
                            <!-- <el-option :label="item.scene_name" :value="item.business_scene" v-for="item in sceneList" :key="item.business_scene"></el-option> -->
                            <!-- <el-option label="短视频原创" :value="1" disabled></el-option>
                            <el-option label="短视频混剪" :value="2" disabled></el-option>
                            <el-option label="直播素材" :value="3" disabled></el-option>
                            <el-option label="直播直投" :value="4" disabled></el-option> -->
                            <el-option label="短视频" :value="5" disabled></el-option>
                            <el-option label="直播" :value="6" disabled></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="核心创意人" prop="centre_uid">
                        <el-select v-model="editVideoSzForm.centre_uid" @change="isChange" filterable placeholder="请选择核心创意人" style="width:100%">
                            <el-option :label="item.nickname" :value="item.id" v-for="item in centreList" :key="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="剪辑" prop="editor_uid">
                        <el-select v-model="editVideoSzForm.editor_uid" filterable placeholder="请选择剪辑" style="width:100%">
                            <el-option :label="item.nickname" :value="item.id" v-for="item in optimiList" :key="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="拍摄" prop="photographer_uid" class="photographer_uid">
                        <div slot="label" class="flexbox flexcenter flexbetween">
                            拍摄
                            <div class="flexbox flexcenter">
                            <el-switch
                            v-model="editVideoSzForm.auto_get_photographer"
                            active-color="#4475ff"
                            :active-value="1"
                            :inactive-value="0"
                            @change="isAutoPhoto"
                            >
                            </el-switch>
                            <div>&nbsp;自动&nbsp;</div>
                            <el-tooltip content="开启自动后，将使用分镜素材所带的拍摄人员。" placement="top">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="7.33333" stroke="#ACB2BB" stroke-width="1.33333"/><path d="M10.1201 6.25C9.31223 6.25 8.67904 6.48077 8.20961 6.94231C7.72926 7.40385 7.5 8.04121 7.5 8.8544H8.74454C8.74454 8.39286 8.83188 8.03022 9.01747 7.77747C9.22489 7.46978 9.56332 7.32692 10.0437 7.32692C10.4148 7.32692 10.7096 7.42582 10.917 7.63461C11.1135 7.84341 11.2227 8.12912 11.2227 8.49176C11.2227 8.76648 11.1245 9.03022 10.9279 9.27198L10.7969 9.42582C10.0873 10.0632 9.66157 10.5247 9.51965 10.8214C9.36681 11.1181 9.30131 11.4808 9.30131 11.8984V12.0522H10.5568V11.8984C10.5568 11.6346 10.6114 11.4038 10.7205 11.1841C10.8188 10.9863 10.9607 10.7995 11.1572 10.6346C11.6812 10.1731 11.9978 9.87637 12.0961 9.76648C12.3581 9.41484 12.5 8.96429 12.5 8.41484C12.5 7.74451 12.2817 7.21703 11.845 6.83242C11.4083 6.43681 10.8297 6.25 10.1201 6.25ZM9.92358 12.5907C9.68341 12.5907 9.4869 12.6676 9.32314 12.8214C9.15939 12.9753 9.08297 13.1731 9.08297 13.4148C9.08297 13.6566 9.15939 13.8544 9.32314 14.0082C9.4869 14.1621 9.68341 14.25 9.92358 14.25C10.1638 14.25 10.3603 14.1731 10.524 14.0192C10.6878 13.8654 10.7751 13.6566 10.7751 13.4148C10.7751 13.1731 10.6878 12.9753 10.5349 12.8214C10.3712 12.6676 10.1638 12.5907 9.92358 12.5907Z" fill="#ACB2BB"/><path d="M10.1201 6.25C9.31223 6.25 8.67904 6.48077 8.20961 6.94231C7.72926 7.40385 7.5 8.04121 7.5 8.8544H8.74454C8.74454 8.39286 8.83188 8.03022 9.01747 7.77747C9.22489 7.46978 9.56332 7.32692 10.0437 7.32692C10.4148 7.32692 10.7096 7.42582 10.917 7.63461C11.1135 7.84341 11.2227 8.12912 11.2227 8.49176C11.2227 8.76648 11.1245 9.03022 10.9279 9.27198L10.7969 9.42582C10.0873 10.0632 9.66157 10.5247 9.51965 10.8214C9.36681 11.1181 9.30131 11.4808 9.30131 11.8984V12.0522H10.5568V11.8984C10.5568 11.6346 10.6114 11.4038 10.7205 11.1841C10.8188 10.9863 10.9607 10.7995 11.1572 10.6346C11.6812 10.1731 11.9978 9.87637 12.0961 9.76648C12.3581 9.41484 12.5 8.96429 12.5 8.41484C12.5 7.74451 12.2817 7.21703 11.845 6.83242C11.4083 6.43681 10.8297 6.25 10.1201 6.25ZM9.92358 12.5907C9.68341 12.5907 9.4869 12.6676 9.32314 12.8214C9.15939 12.9753 9.08297 13.1731 9.08297 13.4148C9.08297 13.6566 9.15939 13.8544 9.32314 14.0082C9.4869 14.1621 9.68341 14.25 9.92358 14.25C10.1638 14.25 10.3603 14.1731 10.524 14.0192C10.6878 13.8654 10.7751 13.6566 10.7751 13.4148C10.7751 13.1731 10.6878 12.9753 10.5349 12.8214C10.3712 12.6676 10.1638 12.5907 9.92358 12.5907Z" stroke="#ACB2BB"/></svg>
                            </el-tooltip>
                            </div>
                        </div>
                        <el-select v-model="editVideoSzForm.photographer_uid" multiple collapse-tags filterable placeholder="请选择拍摄" style="width:100%" :disabled="editVideoSzForm.auto_get_photographer">
                            <el-option :label="item.nickname" :value="item.id" v-for="(item,index) in shotList" :key="index"></el-option>
                        </el-select>
                        <!-- <div style="line-height: 1.5;margin-top: 12px;">
                            分镜素材拍摄：<span v-for="item in 50">张{{item}}、</span> 
                        </div> -->
                    </el-form-item>
                    <el-form-item label="创作类型" prop="create_type">
                        <el-radio-group v-model="editVideoSzForm.create_type" size="small">
                            <el-radio-button :label="0">默认</el-radio-button>
                            <el-radio-button :label="1">原创</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <div style="flex:1">
                <div class="title_text flexbox right_title">
                    确认分镜素材
                    <span class="flexbox">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                            <circle cx="9.00005" cy="8.99981" r="6.6" stroke="#ACB2BB" stroke-width="1.2"/>
                            <path d="M9.10808 5.625C8.381 5.625 7.81114 5.83269 7.38865 6.24808C6.95633 6.66346 6.75 7.23709 6.75 7.96896H7.87009C7.87009 7.55357 7.94869 7.2272 8.11572 6.99972C8.3024 6.7228 8.60699 6.59423 9.0393 6.59423C9.37336 6.59423 9.63865 6.68324 9.82533 6.87115C10.0022 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.012 8.1272 9.83515 8.34478L9.71725 8.48324C9.0786 9.05687 8.69541 9.47225 8.56769 9.73929C8.43013 10.0063 8.37118 10.3327 8.37118 10.7085V10.847H9.50109V10.7085C9.50109 10.4712 9.55022 10.2635 9.64847 10.0657C9.7369 9.88764 9.86463 9.71951 10.0415 9.57115C10.5131 9.15577 10.798 8.88874 10.8865 8.78984C11.1223 8.47335 11.25 8.06786 11.25 7.57335C11.25 6.97006 11.0535 6.49533 10.6605 6.14918C10.2675 5.79313 9.74672 5.625 9.10808 5.625ZM8.93122 11.3316C8.71507 11.3316 8.53821 11.4008 8.39083 11.5393C8.24345 11.6777 8.17467 11.8558 8.17467 12.0734C8.17467 12.2909 8.24345 12.469 8.39083 12.6074C8.53821 12.7459 8.71507 12.825 8.93122 12.825C9.14738 12.825 9.32424 12.7558 9.47162 12.6173C9.619 12.4788 9.6976 12.2909 9.6976 12.0734C9.6976 11.8558 9.619 11.6777 9.48144 11.5393C9.33406 11.4008 9.14738 11.3316 8.93122 11.3316Z" fill="#ACB2BB"/>
                            <path d="M9.10808 5.625C8.381 5.625 7.81114 5.83269 7.38865 6.24808C6.95633 6.66346 6.75 7.23709 6.75 7.96896H7.87009C7.87009 7.55357 7.94869 7.2272 8.11572 6.99972C8.3024 6.7228 8.60699 6.59423 9.0393 6.59423C9.37336 6.59423 9.63865 6.68324 9.82533 6.87115C10.0022 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.012 8.1272 9.83515 8.34478L9.71725 8.48324C9.0786 9.05687 8.69541 9.47225 8.56769 9.73929C8.43013 10.0063 8.37118 10.3327 8.37118 10.7085V10.847H9.50109V10.7085C9.50109 10.4712 9.55022 10.2635 9.64847 10.0657C9.7369 9.88764 9.86463 9.71951 10.0415 9.57115C10.5131 9.15577 10.798 8.88874 10.8865 8.78984C11.1223 8.47335 11.25 8.06786 11.25 7.57335C11.25 6.97006 11.0535 6.49533 10.6605 6.14918C10.2675 5.79313 9.74672 5.625 9.10808 5.625ZM8.93122 11.3316C8.71507 11.3316 8.53821 11.4008 8.39083 11.5393C8.24345 11.6777 8.17467 11.8558 8.17467 12.0734C8.17467 12.2909 8.24345 12.469 8.39083 12.6074C8.53821 12.7459 8.71507 12.825 8.93122 12.825C9.14738 12.825 9.32424 12.7558 9.47162 12.6173C9.619 12.4788 9.6976 12.2909 9.6976 12.0734C9.6976 11.8558 9.619 11.6777 9.48144 11.5393C9.33406 11.4008 9.14738 11.3316 8.93122 11.3316Z" stroke="#ACB2BB"/>
                            </svg>
                        选择成片视频中使用到的分镜素材
                    </span>
                </div>
                <div class="right_content">
                    <div class="flexbox flexcenter flexbetween">
                        <div class="content_box JY_upbox"  @click="selectType(2)">
                            <img src="@/assets/img/jianyin.svg" alt="">
                            <div>上传“剪映”工程文件</div>
                            <div>自动添加分镜库中使用的分镜素材</div>
                            <input type="file" ref="fileInput" :key="fileInputKey" id="folderInput" webkitdirectory multiple @change="handleFiles">
                        </div>
                        <el-tooltip class="item" effect="dark" content="无法识别？，点击查看" placement="top">
                             <el-image :src="url_tips" @click.stop="handleClickStop" :preview-src-list="preview_tips" style="position: absolute;left: 64%;top: 21%;" ></el-image>
                        </el-tooltip>
                        <div class="content_box" @click="selectType(1)">
                        <!-- <div class="content_box" @click="openWork"> -->
                            <svg xmlns="http://www.w3.org/2000/svg" width="26" height="25" viewBox="0 0 26 25" fill="none">
                                <rect x="0.5" width="25" height="25" rx="6.25" fill="url(#paint0_linear_18754_34549)"/>
                                <path d="M10.8298 17.0137V17.8295C10.8298 18.1488 10.7669 18.465 10.6447 18.76C10.5226 19.055 10.3434 19.323 10.1176 19.5487L9.61452 20.0518H16.9061L16.4029 19.5487C16.1771 19.323 15.998 19.055 15.8758 18.76C15.7536 18.465 15.6908 18.1488 15.6908 17.8295V17.0137M20.5518 7.29163V15.1908C20.5518 15.6743 20.3598 16.1379 20.0179 16.4798C19.6761 16.8216 19.2124 17.0137 18.7289 17.0137H7.79163C7.30818 17.0137 6.84452 16.8216 6.50266 16.4798C6.1608 16.1379 5.96875 15.6743 5.96875 15.1908V7.29163M20.5518 7.29163C20.5518 6.80818 20.3598 6.34452 20.0179 6.00266C19.6761 5.6608 19.2124 5.46875 18.7289 5.46875H7.79163C7.30818 5.46875 6.84452 5.6608 6.50266 6.00266C6.1608 6.34452 5.96875 6.80818 5.96875 7.29163M20.5518 7.29163V12.7603C20.5518 13.2437 20.3598 13.7074 20.0179 14.0493C19.6761 14.3911 19.2124 14.5832 18.7289 14.5832H7.79163C7.30818 14.5832 6.84452 14.3911 6.50266 14.0493C6.1608 13.7074 5.96875 13.2437 5.96875 12.7603V7.29163" stroke="url(#paint1_linear_18754_34549)" stroke-width="1.36716" stroke-linecap="round" stroke-linejoin="round"/>
                                <defs>
                                    <linearGradient id="paint0_linear_18754_34549" x1="2.45313" y1="1.5625" x2="24.3281" y2="23.8281" gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#165DFF"/>
                                    <stop offset="0.469868" stop-color="#739EFF"/>
                                    <stop offset="1" stop-color="#5C8EFF"/>
                                    </linearGradient>
                                    <linearGradient id="paint1_linear_18754_34549" x1="6.15113" y1="4.5566" x2="17.6353" y2="21.5094" gradientUnits="userSpaceOnUse">
                                    <stop stop-color="white" stop-opacity="0.93"/>
                                    <stop offset="1" stop-color="white" stop-opacity="0.3"/>
                                    </linearGradient>
                                </defs>
                            </svg>
                            <div>从工作台中添加</div>
                            <div>从工作台中添加已使用的分镜素材</div>
                        </div>
                    </div>
                    <div class="flexbox" style="flex-wrap:wrap;height: 400px;overflow: auto;overflow-x: hidden;gap: 8px" 
                    v-loading="loadingJY" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                        <div v-for="(item,index) in editVideoSzForm.video" style="heigth:189px;width:106px;margin-top:12px;position: relative;">
                             <el-image style="heigth:100%;width:100%;border-radius:12px" :src="item.material + '&x-oss-process=video/snapshot,t_0,f_jpg'">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                            </el-image>
                             <svg @click="delVideo(item,index)" style="cursor: pointer;position: absolute;right: -5px;top: -5px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><g opacity="0.8" filter="url(#filter0_b_19609_31335)"><circle cx="8" cy="8" r="8" fill="#ACB2BB"/></g><path d="M5 5.06055L11 11.0606" stroke="white" stroke-width="1.4" stroke-linecap="round"/><path d="M5 11L11 4.99999" stroke="white" stroke-width="1.4" stroke-linecap="round"/><defs><filter id="filter0_b_19609_31335" x="-60" y="-60" width="136" height="136" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImageFix" stdDeviation="30"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_19609_31335"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_19609_31335" result="shape"/></filter></defs></svg>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 工作台 -->
            <Staging ref="workStaging" :IsXuqiu="true" @getSeleVideoData="getVideoData"/>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm('editVideoSzRef')" class="el-button-width" size="small">取 消</el-button>
            <el-button type="primary" @click="submitForm('editVideoSzRef')" class="el-button-width" size="small" :disabled='disabled' :loading="disabled">下一步</el-button>
        </span>
        <SumbitDialog 
            class="tipsdialog"
            width="400px"
            :dialogVisible.sync="tipsDialogVisible"
            sumbitColor="#F53F3F"
            sumbitText="确认"
            @onSubmit="tipsDialogFn">
            <svg slot="title" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.4136 4.86706C15.3549 3.04431 12.6451 3.04431 11.5864 4.86706L3.85967 18.17C2.82129 19.9577 4.15529 22.1667 6.27331 22.1667H21.7267C23.8447 22.1667 25.1787 19.9577 24.1403 18.17L16.4136 4.86706ZM14 8.16667C13.4201 8.16667 12.95 8.63096 12.95 9.2037V15.4259C12.95 15.9987 13.4201 16.463 14 16.463C14.5799 16.463 15.05 15.9987 15.05 15.4259V9.2037C15.05 8.63096 14.5799 8.16667 14 8.16667ZM14 17.5C13.4201 17.5 12.95 17.9643 12.95 18.537C12.95 19.1098 13.4201 19.5741 14 19.5741C14.5799 19.5741 15.05 19.1098 15.05 18.537C15.05 17.9643 14.5799 17.5 14 17.5Z" fill="#F53F3F"/>
            </svg>
            <div class="dioalog_text" style="margin:20px 0">目前只支持一种上传素材方式，是否继续选择？，将会清空已选的素材列表！</div>
        </SumbitDialog>
    </el-dialog>
</template>

<script>
import Staging from '@/components/material/components/Staging';
import SumbitDialog from "@/components/components/SumbitDialog"
import { clientTos,tosLink } from "@/assets/js/oss";
import JSZip from 'jszip';
export default {
    name: "",
    data() {
        return {
            url_tips:require('@/assets/img/guide_icon.png'),
            preview_tips:[require('@/assets/img/uploadTips.png')],
            fileInputKey:'',
            loadingJY:false,
            tipsDialogVisible:false,
            selectedFiles:null,
            keyValueData:null,
            disabled: false,
            dialogVisible: false,
            brand_name: "",
            product_name: "",
            brand_id: "",
            product_id: "",
            material_finish: null,
            optimiList: [], //优化师列表
            centreList: [], //核心创意人
            sceneList: [], //业务场景列表
            shotList: [], //拍摄-深圳
            is_change: false,
            material: "",
            editVideoSzForm: {
                id: "",
                editor_uid: "",
                photographer_uid: [],
                business_scene: "",
                centre_uid: "",
                create_type:0,
                video:[],
                auto_get_photographer:0,
                shot_selection:1, //分镜选择方式：1工作台 2工程文件。默认1
                enginee_document:""//工程文件地址
            },
            isChangeForm: {},
            editVideoSzRules: {
                centre_uid: [
                    {
                        required: true,
                        message: "请选择核心创意人",
                        trigger: "blur",
                    },
                ],
                business_scene: [
                    {
                        required: true,
                        message: "请选择业务场景",
                        trigger: "blur",
                    },
                ],
                editor_uid: [
                    {
                        required: true,
                        message: "请选择剪辑",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    components:{
        Staging,
        SumbitDialog
    },
    created() {
        this.$bus.on("editVideoSz", (value) => {
            console.log(value)
            this.editVideoSzForm.video = [];
            this.dialogVisible = value.dialogVsb;
            this.editVideoSzForm.id = value.id;
            this.editVideoSzForm.auto_get_photographer = value.auto_get_photographer;
            this.editVideoSzForm.editor_uid = value.editor_uid;
            this.editVideoSzForm.centre_uid = value.centre_uid;
            this.editVideoSzForm.business_scene = value.business_scene;
            this.editVideoSzForm.photographer_uid = value.photographer_uid;
            this.editVideoSzForm.create_type = value.create_type;
            this.editVideoSzForm.shot_selection = value.shot_selection;
            this.editVideoSzForm.enginee_document = value.enginee_document;
            this.brand_name = value.brand_name;
            this.product_name = value.product_name;
            this.brand_id = value.brand_id;
            this.product_id = value.product_id;
            this.material_finish = value.material_finish;
            this.material = value.material;
            this.isChangeForm = JSON.parse(JSON.stringify(value));
            this.getOptimization();
            this.getCentreList();
            this.getSceneList();
            this.getShotList();
            this.getVideoShotList()
        });
    },
    beforeDestroy() {
        this.$bus.off("editVideoSz");
    },
    methods: {
         handleClickStop() {
            this.$nextTick(() => {
                const domImageView = document.querySelector(".el-image-viewer__mask") // 获取遮罩层dom
                if (!domImageView) {
                    return
                }
                domImageView.addEventListener('click', () => {
                    // 点击遮罩层时调用关闭按钮的 click 事件
                    document.querySelector('.el-image-viewer__close').click()
                })
                })
            },
        tipsDialogFn(){
            this.editVideoSzForm.video = [];
            this.selectedFiles = null;
                if(this.editVideoSzForm.shot_selection == 2){
                    this.openWork()
                }else{
                    this.$refs.fileInput.click();
                }
            this.tipsDialogVisible = false;
        },
        //添加素材&上传素材
        selectType(status){
            if(this.editVideoSzForm.video.length>0){
                if(this.editVideoSzForm.shot_selection == status){
                    if(this.editVideoSzForm.shot_selection == 2){
                        this.$refs.fileInput.click();
                    }else{
                        this.openWork()
                    }
                }else{
                    this.tipsDialogVisible = true;
                }
            }else{
                if(status == 2){
                    this.$refs.fileInput.click();
                }else{
                    this.openWork()
                }
                
            }
        },
        // 过滤第一层级的文件
         filterFirstLevelFiles(files) {
            return files.filter(file => {
                const relativePath = file.webkitRelativePath;
                // 只保留第一层级的文件，即路径中只有一个斜杠的文件
                return relativePath.split('/').length === 2;
            });
        },
        //获取_剪映工程文件夹
         handleFiles(event) {
             let isKey_val = false;
            if(event.target.files.length  == 0)return;
            // 获取文件列表
            this.selectedFiles = event.target.files;
            // 筛选第一层文件夹
            const allFiles = this.filterFirstLevelFiles(Array.from(this.selectedFiles));
            //每次进入重新设key 触发input
            this.fileInputKey = new Date; 
            
            // 文件处理逻辑
           Array.from(allFiles).forEach(file => {
                if (file.name === 'key_value.json') {
                    const reader = new FileReader();
                    isKey_val = true;
                    reader.onload = (e) => {
                        try {
                            this.keyValueData = JSON.parse(e.target.result);
                            this.GetJianyingDraft(this.keyValueData);
                        } catch (error) {
                        return  this.$message.error('资源加载错误，请重新上传！',error);
                        }
                    };
                    reader.readAsText(file);
                }
            });
            if(!isKey_val){
                this.$message.error('缺少key_value文件，请重新导出工程文件！');
            }
            
        },
        //读取工程文件_分镜列表
        async  GetJianyingDraft(val){
            this.loadingJY = true;
            const { data: res } = await this.$http.post(
                    "adminapi/demandszv2/videoShotListGetFromJianyingDraft",
                    {
                        id: this.editVideoSzForm.id,
                        json_file: val,
                    }
                );
                if (res.code !== 200) {
                    this.$message.error(res.msg);
                    return;
                } else {
                    this.editVideoSzForm.video = res.data.list;
                    this.editVideoSzForm.shot_selection = 2;
                    this.$message.success(`上传成功！共${res.data.count}条分镜素材。`);
                    console.log(res.data)
                }
                this.loadingJY = false;
        },
        // 获取_文件夹_名称
        extractFolderName() {
            if (this.selectedFiles.length > 0) {
                const firstFile = this.selectedFiles[0];
                const fullPath = firstFile.webkitRelativePath;
                const pathParts = fullPath.split('/');
                console.log('Folder Name:', pathParts[0]);
                return pathParts[0];
            }
        },
       async compressAndUploadZip() {
            if (!this.selectedFiles) {
                alert("请先选择文件夹");
                return;
            }
            
            const zip = new JSZip();
            Array.from(this.selectedFiles).forEach(file => {
                zip.file(file.webkitRelativePath, file);
            });

            const content = await zip.generateAsync({ type: "blob" });
            this.uploadZip(content);
        },
        //TOS存储路径
        upTosUrl(){
            let nowData = new Date();
            let year = nowData.getFullYear();
            let month =
                nowData.getMonth() + 1 < 10
                    ? "0" + (nowData.getMonth() + 1)
                    : nowData.getMonth() + 1;
            let date =
                nowData.getDate() < 10
                    ? "0" + nowData.getDate()
                    : nowData.getDate();
            let getData = year + "-" + month + "-" + date;
            let relativePath = "draft/" + getData + "/" + `${this.extractFolderName()}.zip`;
            return relativePath;
        },
        // 将压缩包上传至TOS 
        async uploadZip(blob) {
            const clienttos = clientTos;
            try {
                const ret = await clienttos.putObject({
                    key: this.upTosUrl(),
                    body: blob,
                });
                    if (ret.statusCode === 200) {
                        // this.editVideoSzForm.enginee_document = tosLink + this.upTosUrl();
                    } else {
                        that.$message.error("上传OS压缩包失败！");
                    }
            } catch (error) {
                console.log(error)
                this.$message.error("上传错误！");
            }
        },
        isAutoPhoto(e){
            if(e === 1){
                this.editVideoSzForm.photographer_uid = [];
            }
        },
       async getVideoShotList(){
             const { data: res } = await this.$http.post(
                "adminapi/Demandszv2/videoShotList",
                {
                    id: this.editVideoSzForm.id,
                    shot_type: 'already',//已用
                    page:1,
                    limit:999
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.editVideoSzForm.video = res.data.list
                // if(res.data.list.length>0){
                //     for(let v of res.data.list){
                //         this.editVideoSzForm.video.push(v)
                //     }
                // }
            }

        },
        //删除选中素材
        delVideo(item,index){
            this.editVideoSzForm.video.splice(index,1)
        },
        //获取工作台 选中素材
        getVideoData(data){
            this.editVideoSzForm.shot_selection = 1;
            if(this.editVideoSzForm.video.length > 0){
                let sel_Id = this.editVideoSzForm.video.map(e=>e.video_id)
                data.forEach(e=>{
                    if(!sel_Id.includes(e.video_id)){
                        this.editVideoSzForm.video.push(e)
                    }
                })
            }else{
                this.editVideoSzForm.video = data;
            }
        },
        //工作台
        openWork(){
            this.$refs.workStaging.drawer = true;
            this.$refs.workStaging.getTemporaryData();
        },
        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.isChange()) {
                        this.$confirm(
                            "需求发生变化，提交后已提交的素材将被清除，确定吗？",
                            "清除",
                            {
                                confirmButtonText: "确认",
                                cancelButtonText: "取消",
                            }
                        )
                            .then(() => {
                                this.submitJust();
                            })
                            .catch(() => {});
                    } else {
                        this.submitJust();
                    }
                } else {
                    this.disabled = false;
                    return false;
                }
            });
        },

        isChange() {
            let isChange = false;
            if (
                this.editVideoSzForm.editor_uid != this.isChangeForm.editor_uid
            ) {
                isChange = true;
            } else if (
                this.editVideoSzForm.business_scene !=
                this.isChangeForm.business_scene
            ) {
                isChange = true;
            } else if (
                this.editVideoSzForm.centre_uid != this.isChangeForm.centre_uid
            ) {
                isChange = true;
            } 
            else if (
                this.editVideoSzForm.photographer_uid.toString() !=
                this.isChangeForm.photographer_uid.toString()
            ) {
                isChange = true;
            }
            return isChange;
        },

        async submitJust() {
            // 是否存在素材 在进行上传TOS
            if(this.editVideoSzForm.video.length > 0 && this.editVideoSzForm.shot_selection == 2 ){
                if (this.selectedFiles){
                    this.editVideoSzForm.enginee_document = tosLink + this.upTosUrl();
                     await this.compressAndUploadZip();
                }
            }

            this.disabled = true;
            let v_data = this.editVideoSzForm.video.map((e) => e.video_id)
            try{
                const { data: res } = await this.$http.post(
                    "adminapi/Demandszv2/videoAdjust",
                    {...this.editVideoSzForm,video:v_data}
                );
                if (res.code !== 200) {
                    this.disabled = false;
                    this.$message.error(res.msg);
                    return;
                } else {
                    this.disabled = false;
                    let attr = {
                        affected_rows: res.data.affected_rows,
                        material: this.material,
                        id: this.editVideoSzForm.id,
                        dialogVsb: true,
                    };
                    this.$bus.emit("addVideoSz", attr,{...this.isChangeForm,...this.editVideoSzForm});
                    this.$parent.getDataList(this.$parent.queryInfo.page);
                    this.resetForm("editVideoSzRef");
                }
            }catch(err){
                this.disabled = false;
                console.log(err)
            }
        },

        // 获取业务场景
        async getSceneList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/sceneList",
                {
                    brand_id: this.brand_id,
                    product_id: this.product_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.sceneList = res.data;
            }
        },

        // 获取核心创意人列表
        async getCentreList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szCentreList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.centreList = res.data;
            }
        },

        // 获取剪辑列表
        async getOptimization() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szClipperList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.optimiList = res.data;
            }
        },

        // 获取深圳拍摄
        async getShotList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szPhotographerList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.shotList = res.data;
            }
        },

        // 关闭重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false;
        },
    },
};
</script>
<style scoped>

>>>.Drawer_footer {
    justify-content: space-between;
}
>>> .footer_btn{
    background: #165DFF !important;
    color: #fff !important;
}
.tipsdialog >>> .footer_btn:nth-child(1){
    color: #536c63 !important;
    background :#fbfbfc !important;
}
.tipsdialog >>> .footer_btn:nth-child(2){
    background :#F53F3F !important;
}
/deep/ .el-form {
    height: calc(100% - 46px);
    padding: 0 20px;
    border-right: 1px solid #E8EAEC;
}
>>>.upvideo .el-dialog__body{
    padding: 0 !important;
}
>>>.upvideo .el-dialog__footer{
    border-top: 1px solid #E8EAEC;
}
.photographer_uid >>> .el-form-item__label{
    width: 100%;
}
.image-slot{
    width: 106px;
    height: 189px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.up_header{
    font-size: 16px;
    width: 100%;
    padding:12px 0;
    justify-content: center;
    align-items: center;
    background: #F8F8F9;
}
.up_header div:nth-child(1){
    margin-right: 12px;
    border-radius: 32.5px;
    background: #165DFF;
    color: #FFF;
    padding: 1px 5px;
    font-size: 13px;
}
.up_header div:nth-child(2){
    color: #191B1E;
}
.up_header div:nth-child(3){
    width: 100px;
    height: 2px;
    margin: 0 40px;
    background: #D7DADE;
}
.up_header div:nth-child(4){
    margin-right: 12px;
    border-radius: 32.5px;
    background: #165DFF;
    color: #FFF;
    padding: 1px 5px;
    font-size: 13px;
    opacity: 0.5;
}
.up_header div:nth-child(5){
    color: #5C636C;
}
.right_title{
    display: flex !important;
    align-items: center;
}

.right_title span{
    margin-left: 8px;
    font-size: 13px;
    color: #ACB2BB;
}
.right_content{
    overflow: hidden;
    padding: 12px 20px 0;
}
.title_text{
    display: block;
    border-bottom: 1px solid #E8EAEC;
    padding: 12px 20px;
    font-size: 16px;
    color: #191B1E;
}
.content_box{
    cursor: pointer;
    width: 208px;
    border-radius: 12px;
    background: rgba(165, 177, 209, 0.10);
    padding: 12px 8px;
    text-align: center;
}
.content_box div:nth-child(2){
    margin-top: 12px;
    font-size: 13px;
    color: #191B1E;
}
.content_box div:nth-child(3){
    font-size: 13px;
    color: #ACB2BB;
}
.sche_info {
    font-size: 14px;
    color: #616c85;
    background-color: rgba(165, 177, 209, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
}

.sche_info li {
    /* height: 20px; */
}

.sche_text {
    line-height: 1.5;
    color: #17233d;
}

.JY_upbox{
    position: relative;
} 
#folderInput{
    display: none;
    /* position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
    opacity: 0; */
}   
</style>

